import React, { Component } from 'react';
import * as api from '../../../config/api.js'
import * as tools from '../../../config/tools'
import img1 from '../../../style/images/titlepng.jpg'
import DatePicker from 'antd/lib/date-picker'; 
import moment from 'moment'; 
import  TimePicker  from 'antd/lib/time-picker';
import message from 'antd/lib/message';
const { RangePicker } = DatePicker;
const format = 'HH:mm';


class Testorder extends Component{

	constructor(props) {
        super(props)
        this.state = {
             testtype:this.props.match.params.orderType,//保险类型
             branchList:[],//公司集合
             cityinfomstList:[],//城市集合
             partyList:[],//机构集合
             certiTypeList:[],//身份类型集合
             channelList:[],//渠道集合
             policyNo: "",//保单号
			 salesId: "",//营销员代码
			 personName: "",//体检人姓名
			 salesTel: "",//营销员电话
			 id: "",//分公司code
			 cityCode: "",//城市code
			 healthchkPartyId: "",//医院code
			 checkupDate: "",//体检时间
			 certiType: "",//证件类型
			 certiCode: "",//证件号码
			 salesChannelCode: "",//渠道code
			 isOtherCityCheckup: "0",//是否异地体检
			 timeString:'',
			 dateString:'',
			 orderId:''
			 
        }
    }
    componentDidMount() {
    	this.select()
        if(this.props.location.query){
            this.setState({
                orderId:this.props.location.query.id
            })
        this.show()
    }
    }
    show(){
        let params ={
            id:this.props.location.query.id
        }
        api.detailorderParticulars(params).then((data)=>{
            console.log(data)
            if (tools.checkResult(data)) {
            this.setState({
               //detail:data.health,
               personName:data.health.personName,
               policyNo:data.health.policyNo
            })
        }
        })
    
    }
    alone(e){
    	this.setState({
    		testtype:e.target.value,
            policyNo: "",//保单号
			salesId: "",//营销员代码
			personName: "",//体检人姓名
			salesTel: "",//营销员电话
			id: "",//分公司code
			cityCode: "",//城市code
			healthchkPartyId: "",//医院code
			checkupDate: "",//体检时间
			certiType: "",//证件类型
			certiCode: "",//证件号码
			salesChannelCode: "",//渠道code
			isOtherCityCheckup: "0",//是否异地体检
			timeString:'',
			dateString:'',
    	});
    }
    select(){
    	let params={

    	}
    	api.healthorderOrder(params).then((data)=>{
    		//console.log(data)
    		if (tools.checkResult(data)) {
                this.setState({
                   branchList:data.branchList,
	               cityinfomstList:data.cityinfomstList,
	               partyList:data.partyList,
	               certiTypeList:data.certiTypeList,
	               channelList:data.channelList
                })
            } else {
                tools.toast.error(data.errMsg || '网络错误');
            }
        }, (err) => {
          tools.toast.offline(err);
        })
    }
    changeData(date, dateString){
    	this.setState({
    		dateString:dateString
    	});
    }
    changeTime(time,timeString){
    	this.setState({
    		timeString:timeString,
    	});
    }
    disabledMinutes(){
    	let arr=[]
    	for(var i=1;i<60;i++){
    		arr.push(i)
    	}
    	arr.splice(29,1)
    	return arr
    }
    checkCode(code,len){
      return code.indexOf(" ")===-1&&code.length === len;
    }
    add(){
        if(this.state.testtype==='03'){
            if(!this.checkCode(this.state.policyNo,10)){
          message.error('请输入正确的十位保单号');
          return;
        }
        if(!this.checkCode(this.state.salesId,13)){
          message.error('请输入正确的十三位营销员编号');
          return;
        }
        if(!this.checkCode(this.state.salesTel,11)){
          message.error('请输入正确的手机号');
          return;
        } 
        }
        if(this.state.testtype==='01'){
            if(!this.checkCode(this.state.policyNo,10)){
          message.error('请输入正确的十位保单号');
          return;
        }
        if(!this.checkCode(this.state.certiCode,18)){
          message.error('请输入正确的身份证号');
          return;
        }
        if(!this.checkCode(this.state.salesTel,11)){
          message.error('请输入正确的手机号');
          return;
        } 
        }
        if(this.state.testtype==='02'){
        if(!this.checkCode(this.state.certiCode,18)){
          message.error('请输入正确的身份证号');
          return;
        }
        if(!this.checkCode(this.state.salesTel,11)){
          message.error('请输入正确的手机号');
          return;
        } 
        }
    	this.setState({
    		checkupDate:this.state.dateString+' '+this.state.timeString
    	});
    	console.log(this.state.testtype)
    	console.log(this.state.policyNo)
    	console.log(this.state.salesId)
    	console.log(this.state.personName)
    	console.log(this.state.salesTel)
    	console.log(this.state.id)
    	console.log(this.state.cityCode)
    	console.log(this.state.healthchkPartyId)
    	console.log(this.state.certiType)
    	console.log(this.state.certiCode)
    	console.log(this.state.salesChannelCode)
    	console.log(this.state.isOtherCityCheckup)
        console.log(this.state.orderId)
    	setTimeout(()=>{
    		console.log(this.state.checkupDate)
    		let params={
            orderId:this.state.orderId,
    		orderType:this.state.testtype,
            policyNo: this.state.policyNo,
			salesId: this.state.salesId,
			personName: this.state.personName,
			salesTel: this.state.salesTel,
			branchCode: this.state.id,
			cityCode: this.state.cityCode,
			healthchkPartyId: this.state.healthchkPartyId,
			checkupTime: this.state.checkupDate,
			certiType: this.state.certiType,
			certiCode: this.state.certiCode,
			salesChannelCode: this.state.salesChannelCode,
			isOtherCityCheckup: this.state.isOtherCityCheckup,
    	}
    	api.healthorderaddOrder(params).then((data)=>{
    		console.log(data)
    		if (tools.checkResult(data)) {
                  tools.toast.success('新增成功')
            } else {
                tools.toast.error(data.errMsg || '网络错误');
            }
        }, (err) => {
          tools.toast.offline(err);
        })
    	},0)
    	
    	
    }
    changeBranch(value) {
		let branchList = this.state.branchList;
		let id = '';
		value=tools.Trim(value)
		for (let i in branchList) {
            if (branchList[i].provinceCode === value) {
                //id = branchList[i].branchId;
                id = branchList[i].provinceCode;
                break;
            }
        }
		this.setState({
			sjld: value,
			cityCode:'',
			healthchkPartyId:'',
			id
		})
	}
    changeCity(cityCode){
        this.setState({
            cityCode,
            healthchkPartyId:''
        })
    }
	render(){
		let resultCityList = [];
        let resultHospitalList = [];
        let cityinfomstList = this.state.cityinfomstList;
        let partyList = this.state.partyList;
        for(let i in cityinfomstList){
            if(this.state.id === cityinfomstList[i].provinceCode){
                resultCityList.push(cityinfomstList[i])
            }
        }

        for(let i in partyList){
            if(this.state.cityCode === partyList[i].cityCode){
                resultHospitalList.push(partyList[i])
            }
        }
		return(
              <div className="content-right">
              <div className="main1">
                <div className="box2">
                    <div className="clearfix"></div>
                    <h3>预约信息</h3>
                    <p className="slt-appment-ty">
                        {(() => {
                              switch (this.props.match.params.orderType) {
                              case '01':
                                  return <label><input type="radio" name='testtype' value='01' defaultChecked={true} onChange={(e)=>this.alone(e)} />团险预约</label>;
                              case '02':
                                  return <label><input type="radio" name='testtype' value='02' defaultChecked={true} onChange={(e)=>this.alone(e)} />预核保无保单预约</label>;
                              case '03':
                                  return  <label><input type="radio" name='testtype' value='03'  defaultChecked={true} onChange={(e)=>this.alone(e)} />个险预约</label>;
                              /*default:
                                  return  <div><label>请选择体检类型</label>
                        <label><input type="radio" name='testtype' value='03'  defaultChecked={true} onChange={(e)=>this.alone(e)} />个险预约</label>
                        <label><input type="radio" name='testtype' value='01' onChange={(e)=>this.alone(e)} />团险预约</label>
                        <label><input type="radio" name='testtype' value='02' onChange={(e)=>this.alone(e)} />预核保无保单预约</label></div>*/
                              }
                          })()}
                    </p>

                    {this.state.testtype==='03'?
                    <div>
                    <div>
                        <label className="fl" >保单号</label>
                        <input value={this.state.policyNo} type="text" className="tl fl width20"  data-input-clear={5} onChange={(e)=>{this.setState({policyNo:e.target.value})}} />
                        <label className="fl" >营销员代码</label>
                        <input type="text" className="tl fl width20"  data-input-clear={5} onChange={(e)=>{this.setState({salesId:e.target.value})}} />
                    </div>
                    <div className="clearfix"></div>
                    <div>
                        <label className="fl" >体检人姓名</label>
                        <input value={this.state.personName} type="text" className="tl fl width20" placeholder="" data-input-clear={5} onChange={(e)=>{this.setState({personName:e.target.value})}}/>
                        <label className="fl" >营销员电话</label>
                        <input type="text" className="tl fl width20" placeholder="" data-input-clear={5} onChange={(e)=>{this.setState({salesTel:e.target.value})}}/>
                    </div>                  
                    <div className="clearfix"></div>
                    <div>
                        <label className="fl" >分公司</label>

                        <select  onChange={(e)=>this.changeBranch(e.target.value)} value={this.state.provinceCode} className="fl-none fl width20" name="choose" >
                        <option value="" >请选择</option>
                        {this.state.branchList.map((item,index)=>{
                            return(
                                    <option key={index} value={item.provinceCode}>{item.branchName}</option>
                                )
                        })}
                        </select>
                        <label className="fl" >城市</label>
                        
                       <select value={this.state.cityCode} onChange={(e)=>this.changeCity(e.target.value)} className="fl-none fl width15" >
                          <option value="">请选择</option>
                          {resultCityList.map((item,index)=>{
                            return(
                                <option key={index} value={item.cityCode}>{item.cityName}</option>
                                )
                          })}
                        </select>
                        <label className="fl" >医院</label>
                        <select className="right-input fl-none fl width15" value={this.state.healthchkPartyId} onChange={(e)=>this.setState({healthchkPartyId:e.target.value})}>
                          <option value="">请选择</option>
                          {resultHospitalList.map((item,index)=>{
                            return(
                                <option  key={index} value={item.id}>{item.partyName}</option>
                                )
                          })}
                        </select>
                        <label className="fl"><a href="" data-reveal-id="operAtion">查看医院详情></a></label>
                    </div>
                    <div className="clearfix"></div>
                    <div>
                        <label className="fl" >体检时间</label>
                        <DatePicker onChange={this.changeData.bind(this)} />
                        
                        <TimePicker className='timestyle' onChange={this.changeTime.bind(this)} defaultOpenValue={moment('8:00','HH:mm')}  format={format}
                        disabledMinutes={this.disabledMinutes} />
                        
                    </div>
                    </div>
                    :null}


                    {this.state.testtype==='01'?<div>
                    	<div>
                            <label className="fl" >保单号</label>
                            <input value={this.state.policyNo} type="text" className="tl fl width20" placeholder="" data-input-clear={5} onChange={(e)=>{this.setState({policyNo:e.target.value})}} />
                            <label className="fl" >体检人姓名</label>
                            <input value={this.state.personName} type="text" className="tl fl width20" placeholder="" data-input-clear={5} onChange={(e)=>{this.setState({personName:e.target.value})}} />
                            
                        </div>
                        <div className="clearfix"></div>
                        <div>
                            <label className="fl" >证件类型</label>
                            <select className="fl-none fl width20" name="choose" onChange={(e)=>{this.setState({certiType:e.target.value})}} >
                                <option value="请选择" >请选择</option>
                                {this.state.certiTypeList.map((item,index)=>{
                                	return(
                                          <option key={index} value={item.codeValue}>{item.codeName}</option>
                                		)
                                })}
                                
                            </select>
                            <label className="fl" >证件号码</label>
                            <input type="text" className="tl fl width20" placeholder="" data-input-clear={5} onChange={(e)=>{this.setState({certiCode:e.target.value})}} />

                        </div>
                        <div className="clearfix"></div>
                        <div>
                            <label className="fl" >分公司</label>

                        <select  onChange={(e)=>this.changeBranch(e.target.value)} value={this.state.provinceCode} className="fl-none fl width20" name="choose" >
                        <option value="" >请选择</option>
                        {this.state.branchList.map((item,index)=>{
                            return(
                                    <option key={index} value={item.provinceCode}>{item.branchName}</option>
                                )
                        })}
                        </select>
                        <label className="fl" >城市</label>
                        
                       <select value={this.state.cityCode} onChange={(e)=>this.changeCity(e.target.value)} className="fl-none fl width15" >
                          <option value="">请选择</option>
                          {resultCityList.map((item,index)=>{
                            return(
                                <option key={index} value={item.cityCode}>{item.cityName}</option>
                                )
                          })}
                        </select>
                        <label className="fl" >医院</label>
                        <select className="right-input fl-none fl width15" value={this.state.healthchkPartyId} onChange={(e)=>this.setState({healthchkPartyId:e.target.value})} >
                          <option value="">请选择</option>
                          {resultHospitalList.map((item,index)=>{
                            return(
                                <option  key={index} value={item.id}>{item.partyName}</option>
                                )
                          })}
                        </select>
                            <label className="fl"><a href="" data-reveal-id="operAtion">查看医院详情></a></label>
                        </div>
                        <div className="clearfix"></div>
                        <div>
                            <label className="fl" >体检时间</label>
                            <DatePicker onChange={this.changeData.bind(this)} />
                        
                        <TimePicker className='timestyle' onChange={this.changeTime.bind(this)} defaultOpenValue={moment('8:00','HH:mm')}  format={format}
                        disabledMinutes={this.disabledMinutes} />
                        </div>
                        <div className="clearfix"></div>
                        <div>
                            <label className="fl" >营销员电话</label>
                            <input type="text" className="tl fl width20" placeholder="" data-input-clear={5} onChange={(e)=>this.setState({salesTel:e.target.value})} />
                            <label className="fl" >渠道</label>

                            <select className="fl-none fl width20" name="choose" onChange={(e)=>{this.setState({salesChannelCode:e.target.value})}}>
                                <option value="请选择" >请选择</option>
                                {this.state.channelList.map((item,index)=>{
                            	return(
                                      <option key={index} value={item.codeValue}>{item.codeName}</option>
                            		)
                                 })}
                            </select>
                           <label className="fl" >
                                是否异地分公司体检: 否<input defaultChecked={true}
                                type="radio" value={0} name="ycompony" onChange={(e)=>{this.setState({isOtherCityCheckup:e.target.value})}} /> 是:<input type="radio" value={1} onChange={(e)=>{this.setState({isOtherCityCheckup:e.target.value})}} className="m-l-1" name="ycompony" />
                            </label>
                        </div>
                    </div>:null}
                    {this.state.testtype==='02'?<div>
                    	<div>
                            <label className="fl" >体检人姓名</label>
                            <input value={this.state.personName} type="text" className="tl fl width20" placeholder="" data-input-clear={5} onChange={(e)=>{this.setState({personName:e.target.value})}} />
                            <label className="fl" >证件类型</label>
                            <select className="fl-none fl width20" name="choose" onChange={(e)=>{this.setState({certiType:e.target.value})}}>
                                <option value="请选择" >请选择</option>
                                {this.state.certiTypeList.map((item,index)=>{
                                	return(
                                          <option key={index} value={item.codeValue}>{item.codeName}</option>
                                		)
                                })} 
                            </select>
                            <label className="fl" >证件号码</label>
                            <input type="text" className="tl fl width20" placeholder="证件号码" data-input-clear={5} onChange={(e)=>{this.setState({certiCode:e.target.value})}} />

                        </div>
                        <div className="clearfix"></div>
                        <div>

                            <label className="fl" >分公司</label>

                        <select  onChange={(e)=>this.changeBranch(e.target.value)} value={this.state.provinceCode} className="fl-none fl width20" name="choose" >
                        <option value="" >请选择</option>
                        {this.state.branchList.map((item,index)=>{
                            return(
                                    <option key={index} value={item.provinceCode}>{item.branchName}</option>
                                )
                        })}
                        </select>
                        <label className="fl" >城市</label>
                        
                       <select value={this.state.cityCode} onChange={(e)=>this.changeCity(e.target.value)} className="fl-none fl width15" >
                          <option value="">请选择</option>
                          {resultCityList.map((item,index)=>{
                            return(
                                <option key={index} value={item.cityCode}>{item.cityName}</option>
                                )
                          })}
                        </select>
                        <label className="fl" >医院</label>
                        <select className="right-input fl-none fl width15" value={this.state.healthchkPartyId} onChange={(e)=>this.setState({healthchkPartyId:e.target.value})}>
                          <option value="">请选择</option>
                          {resultHospitalList.map((item,index)=>{
                            return(
                                <option  key={index} value={item.id}>{item.partyName}</option>
                                )
                          })}
                        </select>
                            <label className="fl"><a href="" data-reveal-id="operAtion">查看医院详情></a></label>

                        </div>
                        <div className="clearfix"></div>
                        <div>

                            <label className="fl" >体检时间</label>
                            <DatePicker onChange={this.changeData.bind(this)} />
                        
                        <TimePicker className='timestyle' onChange={this.changeTime.bind(this)} defaultOpenValue={moment('8:00','HH:mm')}  format={format}
                        disabledMinutes={this.disabledMinutes} />



                        </div>
                        <div className="clearfix"></div>
                        <div>
                            <label className="fl" >营销员电话</label>
                            <input type="text" className="tl fl width20" placeholder="" data-input-clear={5} onChange={(e)=>this.setState({salesTel:e.target.value})} />
                            <label className="fl" >渠道</label>
                             <select className="fl-none fl width20" name="choose" onChange={(e)=>this.setState({salesChannelCode:e.target.value})}>
                                <option value="请选择" >请选择</option>
                                {this.state.channelList.map((item,index)=>{
                            	return(
                                      <option key={index} value={item.codeValue} >{item.codeName}</option>
                            		)
                                 })}
                            </select>

                            <label className="fl" >
                                是否异地分公司体检: 否<input defaultChecked={true} type="radio" value={0} name="ycompony" onChange={(e)=>{this.setState({isOtherCityCheckup:e.target.value})}} /> 是:<input type="radio" value={1} onChange={(e)=>{this.setState({isOtherCityCheckup:e.target.value})}} className="m-l-1" name="ycompony" />
                            </label>
                        </div>
                    </div>:null}
                    {this.state.testtype!='01'&&this.state.testtype!='02'&&this.state.testtype!='03'?'内部错误':null}

                    



                    <div className="clearfix"></div>
                    <div className="btn-main">
                        <span><a  className="button btn-color-red" data-reveal-id="saveModel"
                        onClick={()=>this.add()}>保 存</a></span>
                        
                        <span><a  className="button">取 消</a></span>
                    </div>
                </div>
                <div className="clear"></div>
			</div>


			<div id="operAtion" className="reveal-modal">
        <h1>批量操作</h1>
        <div className="main sen-fax see-fax">
            <div className="">
                <p className="p-img-title"><img src={img1} /></p>
                <p>医院简介：在广东省行政辖区内（含区、   县）经营除法定保险以外的下列业务：
                    （一）人寿保险、健康保险和意外伤害保险等保险业务；
                    （二）上述业务的再保险业务（以上项目凭本分公司有效许可证经营。
                </p>
                <p>备注:<label className="m-l-2">无</label></p>
            </div>
            <div className="ullisitli" >
                <ul>
                    <li>机构地址:<span>广州市越秀区中山六路218-222号捷泰广场21楼</span></li>
                    <li>联系方式：:<span>020-3567898</span></li>
                    <li>预约时间:<span>08：00~12：00am</span><span className="m-l-1">13：30~17：30pm</span></li>
                    <li>交通:<span>地铁1号线西门口(地铁站)</span></li>
                </ul>

            </div>
	        </div>
	        <a className="close-reveal-modal">&#215;</a>
	    </div>

        </div>
			)
	}
}


export default Testorder